/* eslint-disable no-restricted-imports */
<template>
	<div class="options-config">
		<div>
			<draggable :list="value.options" group="colors" handle=".move" @drop.native.stop.prevent="">
				<div v-for="(item, index) in value.options" :key="index" class="list-item">
					<template v-if="!item.isDelete">
            <i class="V7_iconfont V7_iconV7tubiao_yidong move pointer"></i>
            <el-input size="small" v-model="item.value" class="input" maxlength="25" @blur="blur(item)">
              <template slot="suffix">
                <el-radio size="mini" :label="item.key" :value="value[defaultValue]" v-if="type === 'radio'" @click.native.stop="handleRadio(item)"></el-radio>
                <el-checkbox :value="value[defaultValue].includes(item.key)" @click.native.stop="handleCheckBox(item)" size="mini" :label="item.key" v-else></el-checkbox>
              </template>
            </el-input>
            <i class="V7_iconfont V7_iconV7tubiao_guanbi pointer" @click="deleteItem(index)"></i>
          </template>
        </div>
			</draggable>
		</div>
		<el-button class="button" @click.stop="addFields" type="text">添加选项</el-button>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
// eslint-disable-next-line no-restricted-imports
import { debounce } from 'lodash';
import draggable from 'vuedraggable';
import { busConfigStore } from '../../../../store/busConfigStore';

@Component({
  name: 'optionsConfig',
  components: {
    draggable
  }
})
export default class extends Vue {
  private $message: any;
  @Prop() public value!: any;
  @Prop({ default: 'radio' }) public type!: string;
  @Prop({ default: 'defaultValue' }) public defaultValue!: string
  private handleRadio = debounce((item) => {
    if (this.value[this.defaultValue] === item.key) {
      this.value[this.defaultValue] = 0;
    } else {
      this.value[this.defaultValue] = item.key;
    }
  }, 100);

  private handleCheckBox = debounce((item) => {
    const n = this.value[this.defaultValue].indexOf(item.key);
    if (n !== -1) {
      this.value[this.defaultValue].splice(n, 1);
    } else {
      this.value[this.defaultValue].push(item.key);
    }
  }, 100);

  private change () {
    this.$emit('input', this.value);
  }

  private get maxValue () {
    const options = this.value.options;
    return Math.max(0, ...options.map((item) => item.key));
  }

  private blur (item) {
    if (!item.value) {
      item.value = '选项' + item.key;
    } else if (
      this.value.options.find((one) => {
        return one !== item && !one.isDelete && one.value === item.value;
      })
    ) {
      item.value = '选项' + item.key;
      this.$message.error('选项名重复');
    }
  }

  private addFields () {
    const item = { value: '选项0', key: 1, isDelete: 0 };
    const len = this.value.options.length;
    item.key = this.maxValue + 1;
    item.value = `选项${item.key}`;
    busConfigStore.cacheOptions.add(item);
    this.value.options.push(item);
  }

  private deleteItem (index: number) {
    const item = this.value.options[index];
    if (busConfigStore.cacheOptions.has(item)) {
      // 用户新添加的，还没同步后端，删除时直接删除
      this.value.options.splice(index, 1);
    } else {
      this.value.options[index].isDelete = 1;
    }
    if (this.type === 'radio' && this.value.options[index].key === this.value[this.defaultValue]) {
      this.value[this.defaultValue] = 0;
    } else {
      const n = this.value[this.defaultValue].indexOf(this.value.options[index].key);
      if (n !== -1) {
        this.value[this.defaultValue].splice(n, 1);
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.options-config {
	padding-top 8px
	.switch {
		margin-top -30px
	}
	/deep/.el-radio-group {
		font-size 14px
	}
	/deep/.el-checkbox-group {
		font-size 14px
	}
}
.list-item {
	display flex
	align-items center
	margin-bottom 8px
	width 110%
	margin-left -22px
	.picker {
		display block
	}
	.input {
		margin 0 8px
	}
	/deep/.el-checkbox__label {
		display none
	}
	/deep/.el-radio__label {
		display none
	}
	/deep/.el-radio {
		margin-top 8px
	}
	.V7_iconV7tubiao_guanbi {
		font-size 14px
		color #bfbfbf
	}
	.V7_iconV7tubiao_yidong {
		font-size 14px
		color #8c8c8c
		opacity 0
	}
	&:hover .V7_iconV7tubiao_yidong {
		opacity 1
	}
}
.button {
	margin-left 20px
}
</style>
